extends ../_layout
block head
   script.
      Timeline_ajax_url = '/js/timeline/timeline_ajax/simile-ajax-api.js';
      //Timeline_urlPrefix = '/js/timeline/timeline_js/';       
      Timeline_parameters = 'bundle=true';
   script(src = '/js/timeline/timeline_js/timeline-api.js')
   script.
      var tl;
      function onLoad() {
         var eventSource = new Timeline.DefaultEventSource(0);
         
         // Example of changing the theme from the defaults
         // The default theme is defined in 
         // http://simile-widgets.googlecode.com/svn/timeline/tags/latest/src/webapp/api/scripts/themes.js
         var theme = Timeline.ClassicTheme.create();
         theme.event.bubble.width = 350;
         theme.event.bubble.height = 300;
         
         var d = Timeline.DateTime.parseGregorianDateTime(new Date().getFullYear().toString())
         var bandInfos = [
            Timeline.createBandInfo({
               width:          "80%", 
               intervalUnit:   Timeline.DateTime.WEEK, 
               intervalPixels: 200,
               eventSource:    eventSource,
               date:           d,
               theme:          theme,
               layout:         'original'  // original, overview, detailed
            }),
            Timeline.createBandInfo({
               width:          "20%", 
               intervalUnit:   Timeline.DateTime.MONTH, 
               intervalPixels: 200,
               eventSource:    eventSource,
               date:           d,
               theme:          theme,
               layout:         'overview'  // original, overview, detailed
            })
         ];
         bandInfos[1].syncWith = 0;
         bandInfos[1].highlight = true;
                     
         tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
         // Adding the date to the url stops browser caching of data during testing or if
         // the data source is a dynamic query...
         //tl.loadJSON("test.js?"+ (new Date().getTime()), function(json, url) {
         //   eventSource.loadJSON(json, url);
         //});
         
         var events = !{JSON.stringify(events)};
         var jsonData = {
            'events': events
         };

         eventSource.loadJSON(jsonData, 'url');
      }
      var resizeTimerID = null;
      function onResize() {
         if (resizeTimerID == null) {
            resizeTimerID = window.setTimeout(function() {
               resizeTimerID = null;
               tl.layout();
            }, 500);
         }
      }
    


block content
   script.
      $(document).ready(function(){
         onLoad();
      });

   
   div
      h1= 'Timeline'
      h2= 'telling your stories ...'
      br
      br
      br

   hr
   div.container
      div#tl(style='height:400px;')

   hr

   if(user && user.role && (user.role=='admin' || user.role=='manager' || user.role=='official') )
      div.well
         form(method='post')
            div.form-group
               div: input(type='hidden', name='_csrf', value='#{csrf}')
               div: input.form-control(type='text', name='title', placeholder='Timeline Title')
               div: textarea.form-control(rows='4', name='description', placeholder='Timeline Description')
               div: input.form-control(type='text', name='start', placeholder='Start Date')
               div: input.form-control(type='text', name='end', placeholder='End Date')
               div: input.form-control(type='text', name='link', placeholder='Link')
               div: input.form-control(type='text', name='image', placeholder='Image')
               div: input.form-control(type='text', name='icon', placeholder='Icon')
               div: input.form-control(type='text', name='color', placeholder='Color')
            input.btn.btn-primary(type='submit', value='Add Timeline Event')

   if(!user)
      div.well
         form.navbar-form(action='/users/login', method='post')
            div.form-group
               input.form-control(type='text', name='email', placeholder='Email')
               input.form-control(type='password', name='password', placeholder='Password')
            input.btn.btn-success(type='submit', value='Login')
         
